<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		ul {
			list-style: none;
		}

		ul li {
			float: left;
			margin: 20px;
		}

		button {
			margin: 20px;
		}
	</style>
</head>

<body>

	<ul>
		<li>苹果</li>
		<li>华为</li>
		<li>联想</li>
		<li>1加</li>
		<li>小米</li>
		<li>OPPO</li>
		<li>索尼</li>
		<li class="more">显示更多</li>
	</ul>
	<button type="button">更多</button>


	<script src="../jq/jquery-3.2.1.js"></script>
	<script type="text/javascript">
		
		$(function () {
			var str = $('ul li:gt(2):not(:last)');
			str.css({'display':'none'})
			
			$('button').click(function(){
				if(str.is(':visible')){
					str.css({'display':'none'})
					$('.more').css('display','block')
					$('button').html('更多')
				}else{
					str.css({'display':'block'})
					$('.more').css('display','none')
					$('button').html('隐藏')
				}
				
			})
			
			
		})
		
	
	</script>
</body>

</html>